import { Project, ProjectStatus } from '@entities/Projects'
import { AddProjectSchema } from '@features/AddProjectForm/model/AddProjectSchema'
import { yupResolver } from '@hookform/resolvers/yup'
import { useCreateProjectMutation } from '@shared/api/projectApi'
import { useAppSelector } from '@shared/lib/hooks/redux'
import { useClosePopup } from '@shared/lib/hooks/useClosePopup'
import { Avatars } from '@shared/ui/Avatars'
import { Button } from '@shared/ui/Button'
import { CustomInput } from '@shared/ui/CustomInput'
import { FieldError } from '@shared/ui/FieldError'
import { IconButton } from '@shared/ui/IconButton'
import { Panel } from '@shared/ui/Panel'
import { TextArea } from '@shared/ui/TextArea'
import { Title } from '@shared/ui/Title'
import moment from 'moment/moment'
import { memo } from 'react'
import { useForm } from 'react-hook-form'
import styles from './AddProjectForm.module.scss'

interface AddProject {
  description?: string | undefined
  id?: string | undefined
  title: string
}
interface AddProjectFormProps {
  project?: Project
}
export const AddProjectForm = memo(({ project }: AddProjectFormProps) => {
  const closeProjectTaskForm = useClosePopup()
  const [createProjectItem] = useCreateProjectMutation()
  const userId = useAppSelector((state) => state.user.id)
  const dueStartDate = moment(project?.startDate) ?? moment()
  const {
    formState: { errors, isValid },
    handleSubmit,
    register,
  } = useForm<AddProject>({
    defaultValues: project,
    mode: 'onChange',
    resolver: yupResolver(AddProjectSchema),
  })

  const onSubmit = async (data: AddProject) => {
    const { ...project } = data
    const projectRequest: Project = {
      ...(project as Project),
      startDate: dueStartDate,
      status: ProjectStatus.CURRENT,
      ...(userId && { userId }),
    }
    await createProjectItem(projectRequest)
  }
  return (
    <Panel className={styles.component}>
      <Title center tag='h2'>
        Новый проект
      </Title>
      <form onSubmit={handleSubmit(onSubmit)}>
        <div>
          <CustomInput
            className={styles.input}
            name='title'
            placeholder='Название проекта...'
            register={register('title')}
            type='text'
          />
          <FieldError>{errors.title?.message}</FieldError>
        </div>
        <TextArea name='text' placeholder='Описание' type='text'></TextArea>

        <Title center tag='h4'>
          Участники:
        </Title>
        <div className={styles.participants}>
          <Avatars
            imageUrl='https://img-forum-wt-ru.cdn.gaijin.net/original/3X/a/f/af62d76a2d92797df0711e6a94d319490936f3a1.jpeg'
            size='small'
          />
          <IconButton form='circle' iconName='icon-plus' size='large'></IconButton>
        </div>
        <div className={styles.wrapper}>
          <Button color='success' disabled={!isValid} size='small' type='submit'>
            Создать
          </Button>
          <Button color='error' onClick={closeProjectTaskForm} size='small'>
            Отменить
          </Button>
        </div>
      </form>
    </Panel>
  )
})
AddProjectForm.displayName = 'AddProjectForm'
